<template>
  <div class="nv">
    <router-view
      v-if="testid && user"
      v-bind="{
        match,
        getm,
        time,
        matchuser,
        start,
        isnot,
        result,
        setresult,
        sub,
        statematch,
        testid,
      }"
    ></router-view>
  </div>
</template>

<script setup lang="ts">
import { Questionbank } from "../../../admin/views/data";
import { asyncgetquestionbank, asyncgettestid } from "../../../api";
import { Storekey } from "../../../interface";
import { ElMessage } from "element-plus";

import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { Socket } from "socket.io-client";

import {
  computed,
  inject,
  onBeforeUnmount,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import { onBeforeRouteLeave } from "vue-router";
import { useStore } from "vuex";
import { TTestquestion } from "../../../mysql_interface";

const p = defineProps<{ ID: number }>()

const testquestion: TTestquestion = "testquestion";

const loading = ref(false)

const id = computed(() => p.ID);
const store = useStore(Storekey);
const match = reactive<Studycodemodel.Iquestionbank>(
  Object.assign({}, Questionbank)
);
const user = computed(() => {
  return store.state.user;
});
const headnavdialogVisible = inject("headnavdialogVisible", () => { });

const testid = ref<string>();
const statematch = ref<"开始" | "结束">();
const result = ref<Studycodemodel.Iuserquestion[]>();
function setresult(data: Studycodemodel.Iuserquestion[]) {
  result.value = data;
}
// 强制提交
const sub = ref(false);

onBeforeRouteLeave(() => {
  const nav = document.getElementById("nav");
  if (nav) {
    nav.style.display = "none";
  }
});

onBeforeRouteLeave(() => {
  const nav = document.getElementById("nav");
  if (nav) {
    nav.style.display = "block";
  }
});

const isnot = computed(() => {
  const u: Studycodemodel.Iuser = store.getters.getuser;
  if (!u) {
    return {
      err: 1,
      msg: "没有登录，请登录",
    };
  }
  return {
    err: 0,
    msg: "",
  };
});
const matchuser = ref<Studycodemodel.Iuserquestion[]>([]);
const time = reactive({
  isok: false,
  d: 0,
  h: 0,
  m: 0,
  s: 0,
});
onMounted(() => {
  const nav = document.getElementById("nav");
  if (nav) {
    nav.style.display = "none";
  }
  const socket: Socket | undefined =
    store.state.socket;
  if (socket) {
    socket.on(
      testquestion,
      (body: {
        error: number;
        msg: string;
        data?: { state: "开始" | "结束" };
      }) => {
        const { error, msg, data } = body;
        if (error) {
          ElMessage.error(msg);
        }
        if (data) {
          statematch.value = data.state;
        }
      }
    );
  }
  start();
});
watch(
  () => user.value,
  () => {
    start();
  }
);
async function start() {
  if (!user.value) {
    return;
  }
  if (id.value) {
    const e = await asyncgetquestionbank({ ID: id.value });

    Object.assign(match, e);
    testid.value = await asyncgettestid({ questionbankid: id.value });
  }
}

function getm(s: string, e: string) {
  const c = new Date(s).getTime();
  const d = new Date(e).getTime();
  const x = Math.floor((d - c) / 1000 / 60);
  return x;
}

onBeforeUnmount(() => { });
</script>

<style scoped>
.nv {
  height: 100vh;
  overflow: hidden;
  margin-bottom: 0;
}
</style>

